<template>
  <div class="app-container">

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <el-form-item label="试卷名称:" class="item el-col-4">
        <el-input v-model="searchObj.examName" placeholder="试卷名称" ></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="fetchData(pageInfo.pageNum)">查询</el-button>

      <el-button type="primary" @click="addOpen" style="float:right;">新增</el-button>
    </el-form>

    <!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      style="width: 100%">

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (pageInfo.pageNum - 1) * pageInfo.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="examName" label="试卷名称"/>
      <el-table-column prop="oneTypeName" label="部门"/>
      <el-table-column prop="twoTypeName" label="岗位"/>
      <el-table-column prop="examStatus" :formatter="examStatusFormat" label="试卷状态"/>

      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">

          <el-button size="mini" @click="showDataById(scope.row.id)">查看</el-button>
          <el-button type="danger" :disabled="scope.row.examStatus === 'closed'" size="mini" @click="removeDataById(scope.row.id)">删除</el-button>

        </template>
      </el-table-column>

    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page="pageInfo.pageNum"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />


    <!--新增-->
    <el-dialog title="新增" :visible.sync="dialogAdddVisible" :close-on-click-modal="false" width="1200px">

      <el-form :inline="true" class="demo-form-inline" label-width="80px">
        <!--试卷信息-->
        <el-row class="objhead">
          <span>试卷信息</span> <span style="padding-right: 10px; padding-left: 700px;">总分：{{totalGrade}}</span>
        </el-row>

        <el-row>
          <el-form-item label="试卷名称" class="el-col-10">
            <el-input v-model="searchAddObj.examName" placeholder="试卷名称"/>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="部门" class="el-col-10">
            <el-select v-model="searchAddObj.oneTypeId" @change="twoTypeSelects">
              <el-option
                v-for="item in oneTypeSelectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="岗位" class="el-col-10">
            <el-select v-model="searchAddObj2.twoTypeId" @change="subjectListForAdd">
              <el-option
                v-for="item in twoTypeSelectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>



        <!--单选题-->
        <el-row class="objhead"><span>单选题</span></el-row>
        <el-row>
          <el-form-item label="单选题">
            <el-select v-model="searchAddObj3.oneSelects" multiple  placeholder='请选择' style="width: 1000px">
              <el-option
                v-for="item in oneSelectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="单选题每道题分数: " label-width="200px">
            <el-input v-model="searchAddObj3.oneSelectGrade" type="number" placeholder="分数" ></el-input>
          </el-form-item>
        </el-row>

        <!--多选题-->
        <el-row class="objhead"><span>多选题</span></el-row>
        <el-row>
          <el-form-item label="多选题">
            <el-select v-model="searchAddObj3.manySelects" multiple placeholder='请选择' style="width: 1000px">
              <el-option
                v-for="item in manySelectList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="多选题每道题分数: " label-width="200px">
            <el-input v-model="searchAddObj3.manySelectGrade" type="number" placeholder="分数" ></el-input>
          </el-form-item>
        </el-row>


        <!--判断题-->
        <el-row class="objhead"><span>判断题</span></el-row>
        <el-row>
          <el-form-item label="判断题">
            <el-select v-model="searchAddObj3.judges" multiple  placeholder='请选择' style="width: 1000px">
              <el-option
                v-for="item in judgeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="判断题每道题分数: " label-width="200px">
            <el-input v-model="searchAddObj3.judgeGrade" type="number" placeholder="分数" ></el-input>
          </el-form-item>
        </el-row>


        <!--填空题-->
        <el-row class="objhead"><span>填空题</span></el-row>
        <el-row>
          <el-form-item label="填空题">
            <el-select v-model="searchAddObj3.completions" multiple  placeholder='请选择' style="width: 1000px">
              <el-option
                v-for="item in completionList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="填空题每道题分数: " label-width="200px">
            <el-input v-model="searchAddObj3.completionGrade" type="number" placeholder="分数" ></el-input>
          </el-form-item>
        </el-row>

        <!--简答题-->
        <el-row class="objhead"><span>简答题</span></el-row>
        <el-row>
          <el-form-item label="简答题">
            <el-select v-model="searchAddObj3.shortAnswers" multiple  placeholder='请选择' style="width: 1000px">
              <el-option
                v-for="item in shortAnswerList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="简答题每道题分数: " label-width="200px">
            <el-input v-model="searchAddObj3.shortAnswerGrade" type="number" placeholder="分数" ></el-input>
          </el-form-item>
        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="save">保 存</el-button>
        <el-button @click="dialogAdddVisible = false">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>

  import * as examService from '@/api/exam';
  import * as selectService from '@/api/select';
  import * as subjectService from '@/api/subject';


  export default {

    // 定义数据
    data() {
      return {
        listLoading: true, // 数据是否正在加载
        list: null, // banner列表
        total: 0, // 数据库中的总记录数
        page: 1, // 默认页码
        limit: 10, // 每页记录数

        totalGrade: 0, // 总分

        //search
        searchObj: {},
        searchObj2: {},

        //add
        searchAddObj: {examName: '',},
        searchAddObj2: {}, // 目的下拉始化
        searchAddObj3: {
          oneSelects: [],
          manySelects: [],
          judges: [],
          completions: [],
          shortAnswers: [],

        }, // 题目下拉初始化

        //update
        searchUpdObj: {examName: ''},

        dialogAdddVisible: false, // 打开dialog框，新增
        dialogUpdateVisible: false, // 打开dialog框，新增

        pageInfo: {
          pageSize: 10,
          pageNum: 1,
          total: 0
        },

        // 状态标记
        examStatusFlag: false,

        // 类型下拉
        oneTypeSelectList: [],
        twoTypeSelectList: [],

        // 题型下拉
        oneSelectList: [],
        manySelectList: [],
        judgeList: [],
        completionList: [],
        shortAnswerList: [],
      }
    },


    // 当页面加载时获取数据
    created() {
      this.fetchData(1);

      this.oneTypeSelects();
    },

    watch: {
      'searchAddObj3.oneSelects'(){ this.countTotal();},

      'searchAddObj3.manySelects'(){ this.countTotal();},

      'searchAddObj3.judges'(){ this.countTotal();},

      'searchAddObj3.completions'(){ this.countTotal();},

      'searchAddObj3.shortAnswers'(){ this.countTotal();},

      'searchAddObj3.oneSelectGrade'(){
        this.countTotal();
      },
      'searchAddObj3.manySelectGrade'(){
        this.countTotal();
      },
      'searchAddObj3.judgeGrade'(){
        this.countTotal();
      },
      'searchAddObj3.completionGrade'(){
        this.countTotal();
      },
      'searchAddObj3.shortAnswerGrade'(){
        this.countTotal();
      }
    },

    methods: {
      // 调用api层获取数据库中的数据
      fetchData(currentPageNum) {
        const query = {};
        this.pageInfo.pageNum = currentPageNum;
        query.pageInfo = this.pageInfo;
        query.examName = this.searchObj.examName;

        examService.getExamList(query).then(response => {
          this.list = response.data.list;
          this.pageInfo.total = response.data.total;
          // 数据加载并绑定成功
          this.listLoading = false
          }
        )
      },

      countTotal(){
        var total = 0;

        var list1 = this.searchAddObj3.oneSelects;
        var list2 = this.searchAddObj3.manySelects;
        var list3 = this.searchAddObj3.judges;
        var list4 = this.searchAddObj3.completions;
        var list5 = this.searchAddObj3.shortAnswers;

        var num1 = list1 && list1.length > 0 && this.searchAddObj3.oneSelectGrade != '' ? list1.length * this.searchAddObj3.oneSelectGrade : 0;
        var num2 = list2 && list2.length > 0 && this.searchAddObj3.manySelectGrade != '' ? list2.length * this.searchAddObj3.manySelectGrade : 0;
        var num3 = list3 && list3.length > 0 && this.searchAddObj3.judgeGrade != '' ? list3.length * this.searchAddObj3.judgeGrade : 0;
        var num4 = list4 && list4.length > 0 && this.searchAddObj3.completionGrade != '' ? list4.length * this.searchAddObj3.completionGrade : 0;
        var num5 = list5 && list5.length > 0 && this.searchAddObj3.shortAnswerGrade != '' ? list5.length * this.searchAddObj3.shortAnswerGrade : 0;

        total = num1 + num2 + num3 + num4 + num5;

        this.totalGrade = total;
      },

      save(){
        const query = {};
        query.examName = this.searchAddObj.examName;
        query.oneTypeId = this.searchAddObj.oneTypeId;
        query.twoTypeId = this.searchAddObj2.twoTypeId;

        query.oneSelectList = this.searchAddObj3.oneSelects;
        query.manySelectList = this.searchAddObj3.manySelects;
        query.judgeList = this.searchAddObj3.judges;
        query.completionList = this.searchAddObj3.completions;
        query.shortAnswerList = this.searchAddObj3.shortAnswers;

        query.oneSelectGrade = this.searchAddObj3.oneSelectGrade;
        query.manySelectGrade = this.searchAddObj3.manySelectGrade;
        query.judgeGrade = this.searchAddObj3.judgeGrade;
        query.completionGrade = this.searchAddObj3.completionGrade;
        query.shortAnswerGrade = this.searchAddObj3.shortAnswerGrade;

        query.examTotal = this.totalGrade;

        console.log(JSON.stringify(query));

        examService.addExam(query).then(response => {
          this.fetchData(1);
          this.dialogAdddVisible= false;
          this.dialogInputReset();
          //提示
          this.$message({
            type: 'success',
            message: '保存成功!'
          });

          }
        )
      },

      addOpen(){
        this.dialogAdddVisible = true;
        this.dialogInputReset();
      },

      dialogInputReset(){
        this.searchAddObj2 = {};
        this.searchAddObj = {};
        this.searchAddObj3 = {};
      },

      showDataById(id){

        let routeUrl = this.$router.resolve({
          path: "detail",
          query: {id: id}
        });

        console.log(routeUrl.href);
        window.open(routeUrl.href, '_blank');
      },

      //删除
      removeDataById(id) {
        this.$confirm('此操作将删除试卷信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //确定执行then方法
          //调用接口
          examService.deleteExam(id)
            .then(response => {
              //提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              //刷新页面
              this.fetchData(this.pageInfo.pageNum);
            })
        })
      },

      examStatusFormat(row, column, cellValue){
        var examStatus = row[column.property];
        if (examStatus === 'closed'){
          this.examStatusFlag = true;
          return '已关闭';
        }
        return '未关闭';
      },

      // 根据部门、岗位 查询 题目下拉数据
      subjectListForAdd(){
        if (this.searchAddObj.oneTypeId && this.searchAddObj2.twoTypeId){

          const query = {};
          query.oneTypeId = this.searchAddObj.oneTypeId;
          query.twoTypeId = this.searchAddObj2.twoTypeId;

          // 单选题
          selectService.getOneSelectList(query).then(res =>{
            this.oneSelectList = res.data;
          });

          // 多选题
          selectService.getManySelectList(query).then(res =>{
            this.manySelectList = res.data;
          });

          // 判断题
          selectService.getJudgeList(query).then(res =>{
            this.judgeList = res.data;
          });

          // 填空题
          selectService.getCompletionList(query).then(res =>{
            this.completionList = res.data;
          });

          // 简答题
          selectService.getShortAnswerList(query).then(res =>{
            this.shortAnswerList = res.data;
          });

        }else {
          this.searchAddObj3 = {}; // 类型2 没值时， 清空题目下拉。
        }

      },

      // 类型1 下拉数据
      oneTypeSelects(){
        selectService.getOneTypeSelectList().then( res =>{
          this.oneTypeSelectList = res.data;
        });
      },

      // 类型2 下拉数据
      twoTypeSelects(){
        selectService.getTwoTypeSelectList(this.searchAddObj.oneTypeId).then( res =>{
          this.twoTypeSelectList = res.data;
          this.searchAddObj2 = {};
          this.searchAddObj3 = {};
        });
      },


      // 当页码发生改变的时候
      changeSize(size) {
        console.log(size)
        this.pageInfo.pageSize = size;
        this.fetchData(1);
      },

      // 重置查询表单
      resetData() {
        console.log('重置查询表单')
        this.searchObj = {}
        this.fetchData()
      },

    }
  }
</script>

<style scoped lang="scss">
  .objhead {
    width: 100%;
    /*height: 47px;*/
    background: #effaff;
    line-height: 47px;
    color: #0076ff;
    /*padding-left: 26px;*/
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom:1px solid #000;

  }


</style>
